<!--
 * @Author: your name
 * @Date: 2020-04-01 10:47:21
 * @LastEditTime: 2020-04-10 16:20:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\system\organization\index.vue
 -->
<template>
  <div>
    <div style="width:100%;height:42px">
      <el-form>
        <el-col :span="20">
          <el-form-item class="postInfo-container-item" style="padding-right:40px">
            <el-input placeholder="检查表名称" v-model="postForm.tableName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
           <router-link :to="'/check/table/preview/'+id">
          <el-button type="primary" icon="el-icon-view" style="float:right;margin-right:33%">预览检查表</el-button>

          </router-link>
        </el-col>
      </el-form>
    </div>
    <div style="padding:10px;width: 100%;" class="container">
      <div class="left">
        <fieldset class="fieldInfo">
          <legend>
            <span>检查表内容树</span>
          </legend>
          <div class="tree">
            <el-tree
              ref="checktargetTree"
              :data="postForm.checktableData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </fieldset>
      </div>
      <div class="right">
        <fieldset class="fieldInfo">
          <legend>
            <span>检查信息</span>
          </legend>
          <div class="checktargetDetail">
            <el-form ref="postForm" :model="postForm" class="form-container">
              <div class="createPost-main-container">
                <el-row>
                  <el-col :span="24">
                    <div class="postInfo-container">
                      <el-row>
                        <el-col :span="24">
                          <el-form-item
                            label-width="115px"
                            label="检查要点"
                            prop="checktargetName"
                            class="postInfo-container-item"
                          >
                            <el-input placeholder="请输入检查要点" v-model="postForm.checktargetName"></el-input>
                          </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                          <el-form-item
                            label-width="115px"
                            label="备注"
                            prop="comments"
                            class="postInfo-container-item"
                          >
                            <el-input
                              placeholder="请输入备注信息"
                              v-model="postForm.comments"
                              type="textarea"
                              :rows="4"
                            ></el-input>
                          </el-form-item>
                        </el-col> -->
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item style="text-align: center;">
                            <el-button type="primary" @click="saveChecktarget">保存节点</el-button>
                            <el-button type="primary" @click="deleteChecktarget">删除节点</el-button>
                            <el-button type="primary" @click="dialogFormVisible = true">新增子节点</el-button>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
        </fieldset>
      </div>
      <!-- 新增组织节点信息对话框 -->
      <el-dialog title="新增检查目标" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm">
          <el-form-item label="父组织" label-width="115px">
            <el-input v-model="dialogForm.parentChecktargetName" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="组织名称" label-width="115px">
            <el-input v-model="dialogForm.checktargetName"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="115px">
            <el-input v-model="dialogForm.comments" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addChecktarget">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  fetchTreeData,
  deleteChecktarget,
  addChecktarget,
  fetchChecktable
} from '@/api/checktable'
export default {
  data() {
    const addChecktarget = {
      checktargetName: '',
      comments: ''
    }
    return {
      postForm: Object.assign({}, addChecktarget),
      checktargetData: [],
      dialogFormVisible: false,
      dialogForm: {
        parentChecktargetName: '',
        checktargetName: '',
        comments: ''
      },
      currentSelectNode: {},
      id:""
    }
  },
  components: {},
  created() {
    const id = this.$route.params && this.$route.params.id;
    this.id = id;
    this.fetchData(id)
  },
  methods: {
    //根据id查找
    fetchData(id) {
      fetchChecktable(id)
        .then((response) => {
          console.log("xixi",response)
          this.postForm = response.data

          // just for test
          //this.postForm.title += `   Article Id:${this.postForm.id}`
          this.postForm.content_short += `   Article Id:${this.postForm.id}`

          // set tagsview title
          this.setTagsViewTitle()

          // set page title
          this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setTagsViewTitle() {
      const title = '新增检查表内容'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '新增检查表内容'
      document.title = `${title} - ${this.postForm.id}`
    },


    getTreeData() {
      fetchTreeData().then((response) => {
        this.checktargetData = response.data.checktargetData
      })
    },
    saveChecktarget() {
      console.log(this.postForm)
    },
    handleNodeClick(data, node) {
      // console.log(data, node)
      this.currentSelectNode = node
      this.postForm.checktargetName = data.label
      this.dialogForm.parentChecktargetName = data.label
      this.postForm.comments = data.comments
    },
    addChecktarget() {
      let newChecktarget = {
        id: 100,
        pid: this.currentSelectNode.data.pid,
        label: this.dialogForm.checktargetName,
        comments: this.dialogForm.comments
      }
      this.$refs.checktargetTree.append(newChecktarget, this.currentSelectNode)
      this.dialogFormVisible = false
    },
    deleteChecktarget() {
      this.$refs.checktargetTree.remove(this.currentSelectNode)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  .fieldInfo {
    border-color: #eee;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
    height: 78vh;
    legend {
      color: #666;
    }
  }
  .left {
    flex: 1;
  }
  .right {
    flex: 2;
  }
}
</style>

